{% extends "Sales_base.html" %}
{% block title %}
农产品详情页
{% endblock %}
{% block head %}
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }

        body {
            background: #f5f6fa;
        }

        .product-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 2rem;
            background: white;
            border-radius: 12px;
            box-shadow: 0 3px 15px rgba(0,0,0,0.1);
        }

        .product-main {
            display: flex;
            gap: 2rem;
        }

        .product-gallery {
            flex: 0 0 450px;
            position: relative;
        }

        .main-image {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 1rem;
        }

        .thumbnails {
            display: flex;
            gap: 1rem;
        }

        .thumbnail {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border: 2px solid transparent;
            border-radius: 4px;
            cursor: pointer;
        }

        .thumbnail.active {
            border-color: #2c7a47;
        }

        .product-info {
            flex: 1;
        }

        .product-title {
            font-size: 1.8rem;
            color: #333;
            margin-bottom: 1rem;
        }

        .product-desc {
            color: #666;
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .price-section {
            background: #f8f9fa;
            padding: 1.5rem;
            border-radius: 8px;
            margin-bottom: 2rem;
        }

        .price-range {
            color: #e74c3c;
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .params-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .param-item {
            display: flex;
            align-items: center;
        }

        .param-label {
            color: #999;
            min-width: 80px;
            margin-right: 1rem;
        }

        .param-value {
            color: #333;
        }

        .sales-rank {
            display: inline-block;
            background: #fde9e9;
            color: #e74c3c;
            padding: 0.3rem 0.8rem;
            border-radius: 4px;
            font-size: 0.9rem;
        }

        .specs-section {
            margin: 2rem 0;
        }

        .specs-title {
            font-size: 1.2rem;
            margin-bottom: 1rem;
        }

        .spec-card {
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 1rem;
            margin-bottom: 1rem;
            cursor: pointer;
            transition: all 0.3s;
        }

        .spec-card.active {
            border-color: #2c7a47;
            background: #f5fcf8;
        }

        .spec-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }

        .spec-price {
            color: #2c7a47;
            font-weight: bold;
        }

        .spec-moq {
            color: #999;
            font-size: 0.9rem;
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }

        .btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-primary {
            background: #2c7a47;
            color: white;
        }

        .btn-secondary {
            background: #f5f6fa;
            color: #333;
        }

        .btn:hover {
            opacity: 0.9;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin: 2rem 0;
        }

        .stat-item {
            text-align: center;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .stat-value {
            font-size: 1.5rem;
            color: #2c7a47;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            color: #666;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .product-main {
                flex-direction: column;
            }

            .params-grid {
                grid-template-columns: 1fr;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
{% endblock %}
{% block main %}
    <div class="product-container">
        <div class="product-main">
            <!-- 商品图集 -->
            <div class="product-gallery">
                <img src="https://via.placeholder.com/450x400" class="main-image" alt="商品主图">
                <div class="thumbnails">
                    <img src="https://via.placeholder.com/80x80" class="thumbnail active" alt="缩略图1">
                    <img src="https://via.placeholder.com/80x80" class="thumbnail" alt="缩略图2">
                    <img src="https://via.placeholder.com/80x80" class="thumbnail" alt="缩略图3">
                </div>
            </div>

            <!-- 商品信息 -->
            <div class="product-info">
                <h1 class="product-title">泰莲小颗粒去芯带芯白莲子</h1>
                <div class="sales-rank">湘莲热销榜单 第2名</div>
                <p class="product-desc">粉糯香甜，品质保证，厂家直供真空包装干货去芯磨皮新鲜白莲子通芯湘莲</p>

                <!-- 价格区间 -->
                <div class="price-section">
                    <div class="price-range">¥14.50-16.80元</div>
                    <div class="params-grid">
                        <div class="param-item">
                            <span class="param-label">起批量</span>
                            <span class="param-value">1斤起批</span>
                        </div>
                        <div class="param-item">
                            <span class="param-label">发货地</span>
                            <span class="param-value">湖南省湘潭市湘潭县</span>
                        </div>
                    </div>
                </div>

                <!-- 采购数据 -->
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-value">398</div>
                        <div class="stat-label">累计询价</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">94</div>
                        <div class="stat-label">成交订单</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">4.9</div>
                        <div class="stat-label">用户评价</div>
                    </div>
                </div>

                <!-- 规格选择 -->
                <div class="specs-section">
                    <h3 class="specs-title">规格选择</h3>
                    <div class="spec-card active">
                        <div class="spec-header">
                            <span>精选过筛去芯磨白莲</span>
                            <span class="spec-price">¥15.5/斤</span>
                        </div>
                        <div class="spec-moq">1斤起批</div>
                    </div>
                    <div class="spec-card">
                        <div class="spec-header">
                            <span>精选过筛带芯磨白莲</span>
                            <span class="spec-price">¥14.5/斤</span>
                        </div>
                        <div class="spec-moq">1斤起批</div>
                    </div>
                    <div class="spec-card">
                        <div class="spec-header">
                            <span>泰莲大号（1.0）带芯磨白莲</span>
                            <span class="spec-price">¥15.8/斤</span>
                        </div>
                        <div class="spec-moq">1斤起批</div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <button class="btn btn-primary">立即订购</button>
                    <button class="btn btn-secondary">联系供应商</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 规格选择交互
        document.querySelectorAll('.spec-card').forEach(card => {
            card.addEventListener('click', function() {
                document.querySelectorAll('.spec-card').forEach(c =>
                    c.classList.remove('active'));
                this.classList.add('active');
            });
        });

        // 缩略图切换
        document.querySelectorAll('.thumbnail').forEach(thumb => {
            thumb.addEventListener('click', function() {
                const mainImg = document.querySelector('.main-image');
                const thumbSrc = this.src;

                // 切换主图
                document.querySelectorAll('.thumbnail').forEach(t =>
                    t.classList.remove('active'));
                this.classList.add('active');
                mainImg.src = thumbSrc;
            });
        });
    </script>
{% endblock %}